import React, {useEffect, useState} from 'react';
import {Divider, FloatButton, List, Skeleton, Spin} from "antd";
import {CustomerServiceOutlined, LoadingOutlined, RedoOutlined, RollbackOutlined} from "@ant-design/icons";
import CompanyCard from "../../components/CompanyCard";
import {useRequest} from "ahooks";
import {shopCateList, tjShopList} from "../../api";
import {useNavigate, useParams} from "react-router-dom";
import InfiniteScroll from "react-infinite-scroll-component";
 function Index(props) {
    const {pName, childName, id} = useParams();
    const navigate = useNavigate();


    const [page, setPage] = useState(1);
    const [hasMore, setHasMore] = useState(true);
    // 推荐厂家
    const [shopData, setShopData] = useState([]);
    const {loading: shopListLoading, run: shopListRun} = useRequest(shopCateList, {
        manual: true,
        onSuccess: (result, params) => {
            if (result.data.length > 0) {

                setShopData(state => [...state, ...result.data])
                setPage(page + 1)
            } else {
                setHasMore(false)
            }
        },
    });

    useEffect(() => {
        shopListRun(1, id, "")
    }, [])


    const refresh = () => {
        setPage(1)
        setHasMore(true)
        setShopData([])
        shopListRun(1, id, "")
    }
    return (
        <div>
            {/*浮动按钮*/}
            <>
                <FloatButton
                    shape="circle"
                    type="primary"
                    style={{insetInlineEnd: 94}}
                    icon={<RedoOutlined/>}
                    title="刷新"
                    onClick={refresh}

                />
                <FloatButton
                    shape="square"
                    type="primary"
                    style={{insetInlineEnd: 24}}
                    icon={<RollbackOutlined/>}
                    title="返回上一级"
                    onClick={() => navigate(-1)}

                />
            </>
            {/*推荐厂商*/}
            <div   className="flex flex-col mt-4   ">
                <Divider orientation='left' children={<span>{`${pName}/${childName}`}</span>}/>

                <div
                    id="scrollableDiv"
                    className="scrollable"
                    style={{
                        height: '84vh',
                        overflow: 'auto',

                        padding: '0 5px',
                        // border: '1px solid rgba(140, 140, 140, 0.1)',
                    }}
                >
                    <InfiniteScroll
                        dataLength={shopData.length}
                        next={() => shopListRun(page, id)}
                        hasMore={hasMore}
                        loader={
                            <Skeleton

                                paragraph={{
                                    rows: 8,
                                }}
                                active
                            />
                        }
                        endMessage={<Divider plain>没有更多数据了 🤐</Divider>}
                        scrollableTarget="scrollableDiv"
                    >


                        <List

                            dataSource={shopData}
                            renderItem={(item) => (
                                <List.Item>

                                    <CompanyCard data={item} key={item.id}/>
                                </List.Item>
                            )}
                        />
                    </InfiniteScroll>
                </div>


            </div>
        </div>
    );
}

export default Index;